<template>
  <div>
    <el-card class="el-card" :style="{ height: cardHeight + 'px' }">
      <el-container style="height: 100%">
        <el-header class="p_title">
          <el-button type="primary" size="small" @click="dialogVisibleAddList"
            >新增分类</el-button
          >
          <el-button type="primary" size="small">上传图片</el-button>
        </el-header>
        <el-container>
          <!-- 图库分类 -->
          <AsidePicCate
            ref="picsCateRef"
            @edit="editCateList"
            @del="delCateList"
            @change="changeCateListId"
          ></AsidePicCate>
          <!-- 图库列表 -->
          <AsidePicMain ref="picMainRef"></AsidePicMain>
        </el-container>
      </el-container>
    </el-card>
    <!-- 新增图库对话框 -->
    <el-dialog v-model="dialogVisibleAddPics" :title="titleVal" width="40%">
      <el-form
        ref="ruleFormRefAddPic"
        :model="ruleFormAddPic"
        :rules="rulesAddPic"
      >
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="ruleFormAddPic.name"></el-input>
        </el-form-item>
        <el-form-item label="分类排序" prop="order">
          <el-input-number
            v-model="ruleFormAddPic.order"
            @change="handleChangeNums"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisibleAddPics = false">取消</el-button>
        <el-button type="primary" @click="addPicsCateListOk">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import AsidePicCate from "@/components/AsidePicCate.vue";
import AsidePicMain from "@/components/AsidePicMain.vue";
import {
  addPicsCateListFn,
  editPiscCateList,
  delCateListFn,
} from "@/api/pics.js";
import { ElMessage, ElMessageBox } from "element-plus";
const windowHeight = window.innerHeight || document.body.clientHeight;
const cardHeight = windowHeight - 170;
const dialogVisibleAddPics = ref(false);
const ruleFormRefAddPic = ref(null);
const titleVal = ref("");
const id = ref("");
// 获取子组件实例
const picsCateRef = ref(null);
const picMainRef = ref(null)
// 定义表单数据
const ruleFormAddPic = reactive({
  name: "",
  order: 10,
});
// 表单验证规则
const rulesAddPic = reactive({
  name: [{ required: true, message: "请输入分类", trigger: "blur" }],
  order: [
    {
      required: true,
      message: "请输入排序",
      trigger: "blur",
    },
  ],
});
// 修改排序
const handleChangeNums = (val) => {
  ruleFormAddPic.order = val;
};
// 确认新增图库分类
const addPicsCateListOk = () => {
  // 验证规则是否通过
  ruleFormRefAddPic.value.validate(async (isValid) => {
    if (!isValid) {
      return;
    }
    if (titleVal.value == "新增图库分类") {
      const res = await addPicsCateListFn(ruleFormAddPic);
      if (res.msg && res.msg !== "ok") {
        return;
      }
      ElMessage({
        message: "新增成功",
        type: "success",
      });
    } else if (titleVal.value == "修改图库分类") {
      const res = await editPiscCateList(id.value, ruleFormAddPic);
      if (res.msg && res.msg !== "ok") {
        return;
      }
      ElMessage({
        message: "修改成功",
        type: "success",
      });
    }
    dialogVisibleAddPics.value = false;
    // 获取最新数据（调用子组件方法）
    picsCateRef.value.getPicsCateData();
  });
};
// 新增图库分类对话框
const dialogVisibleAddList = () => {
  // 数据初始化
  ruleFormAddPic.name = "";
  ruleFormAddPic.order = 10;
  titleVal.value = "新增图库分类";
  dialogVisibleAddPics.value = true;
};
// 修改图库分类
const editCateList = (item) => {
  // 修改对话框标题
  titleVal.value = "修改图库分类";
  id.value = item.id;
  // 初始化数据源
  ruleFormAddPic.name = item.name;
  ruleFormAddPic.order = item.order;
  dialogVisibleAddPics.value = true;
};
// 删除图库分类
const delCateList = async (item) => {
  const isDel = await ElMessageBox.confirm("是否删除图库分类", "删除", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).catch((err) => {
    return err;
  });
  if (isDel == "confirm") {
    // 调用删除分类图库接口
    const res = await delCateListFn(item.id);
    if (res.msg && res.msg !== "ok") {
      return ElMessage.error(res.msg);
    }
    ElMessage({
        message: "删除成功",
        type: "success",
      });
    //    获取最新数据（调用子组件方法）
    picsCateRef.value.getPicsCateData();
  }
};
// 获取子组件传递的图库id
const changeCateListId = (id) => {
    picMainRef.value.getDataById(id)
}
</script>

<style scoped lang="less">
.el-card {
  margin-top: 20px;
  padding-top: 0px !important;
}
:deep(.el-card__body) {
  padding-top: 0px !important;
  height: 100%;
}
.p_title {
  border-bottom: 1px solid #dbdbdb;
  display: flex;
  align-items: center;
}
</style>
